<template>
	<view>
		<view class="u-p-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索" :show-action="false" shape="square" clearabled @change="getList"></u-search>
				</view>				
				<view class="u-p-l-30">
					<button size="mini" @click="showWindow = true" class="u-h-64" style="display: block;">
						<view class="u-flex u-align-items u-justify-content u-h-60">
							<u-icon name="plus" size="28" class="u-tips-color"></u-icon>
							<text class="u-p-l-10 u-tips-color">新建</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<navigator 
			:url="`/pages/admin/franchise/views/views?id=${item.id}`"
			class="grid-box border-shadow u-m-b-20" 
			v-for="(item,index) in list"
			:key="item.id"
		>
			<view class="title u-border-bottom">
				<view class="u-flex">
					<text class="u-font-32 name u-flex-1">{{item.name}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="label">
				<view class="u-flex">
					<view class="u-flex-1">
						<view class="u-p-b-10"><text class="u-tips-color u-font-24">结算方式</text></view>
						<view><text class="u-font-32">{{item.paymode}}</text></view>
					</view>
					<view class="u-flex-1">
						<view class="u-p-b-10"><text class="u-tips-color u-font-24">账户余额</text></view>
						<view><text class="u-font-32">{{item.balance}}</text></view>
					</view>
				</view>
			</view>
			<!-- <view class="bottom u-m-t-20">
				<view class="u-flex">
					<view class="u-flex-1">

					</view>
					<u-button v-if="!item.issuper" type="error" size="mini" @click="removeStaff(item)"><u-icon name="close-circle" color="#ffffff" class="u-p-r-10" size="28"></u-icon>离职</u-button>
				</view>
			</view> -->
		</navigator>
		<u-loadmore :status="loadStatus" />
		
		<u-modal
			v-model="showWindow" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="新建加盟商" 
			@confirm="confirmAdd"
			@cancel="cancelStaff">
			<scroll-view :scroll-y="true" class="slot-content">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form label-width="180rpx">
						<u-form-item label="名称" required>
							<u-input placeholder="请输入名称" type="text" border v-model="addForm.name" />
						</u-form-item>
						<u-form-item label="选择员工" class="u-p-0" required>
							<view class="input-text u-flex u-m-l-0" @click="show = true;">
								<text>{{addForm.staffname || '点击选择员工'}}</text>
								<view class="u-flex-1"></view>
								<u-icon name="arrow-right" class="tips-txt"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="账号管理模式">
							<u-radio-group v-model="addForm.enablebalance">
								<u-radio :name="false">公帐结算</u-radio>
								<u-radio :name="true">独立结算</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</u-modal>
		<staff-list v-model="show" @confirm="confirmStaff" @close="show = false"></staff-list>
	</view>
</template>

<script>
	import staffList from '@/components/form-select-type/staff-list.vue'
	import {
		mapState,
	} from 'vuex';
		
	export default {
		components:{
			staffList,
		},
		data() {
			return {
				key: '',
				pageIndex: 0,
				pageSize: 0,
				list: [],
				loadStatus: 'loadmore',
				addForm: {
					name: "",
					staffname: "",
					manager: null,
					enablebalance: false
				},
				show: false,
				showWindow: false
			}
		},
		computed: {
			...mapState({
				operatorid: state => state.operatorid,
				storeId: state => state.storeId
			})
		},
		onReachBottom(e) {
			// 此tab为空数据
			this.pageIndex += 1
			if (this.loadStatus == 'loadmore') {
				this.getList()
			}
		},
		onShow() {
			this.getList(true)
		},
		methods: {
			confirmStaff(item) {
				console.log(item)
				this.addForm.staffname = item.name
				this.addForm.manager = item.id
			},
			getList(isSearch = false){
				// 关键词搜索
				if(isSearch){
					this.PageIndex = 1
					this.list = []
					this.loadStatus = 'loadmore'
				}
				this.$u.post('/Franchise/List', {
					"PageIndex": this.pageIndex,
					"pageSize": this.pageSize,
					"Key": this.key
				}).then((res) => {
					console.log(res)
	
					this.list = res.rows;
				}).catch(() => {
					
				})
			},
			//修改状态
			switchState(event, item) {
				this.$u.post(`/Operator/Staff/Set`,{
					staffId: item.id,
					isManager: event,
				}).then((res) => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				}).catch((err) => {
					this.getList()
				})
			},
			// 新建加盟商
			confirmAdd(){
				this.$u.post('/Franchise/Create', {
					name: this.addForm.name,
					manager: [this.addForm.manager],
					enablebalance: this.addForm.enablebalance
				}).then((res) => {
					// uni.showModal({
					// 	content: '操作成功',
					// 	showCancel: false,
					// 	success: (res)=> {
					// 		if (res.confirm) {
					// 			uni.navigateBack()
					// 		}
					// 	}
					// });
					uni.showToast({
						title: '操作成功'
					})
					this.getList()
				})
			},
			cancelStaff(){
				this.addForm = {
					name: '',
					mobile: null,
					id: 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		width: 100%;
		margin-left: 30rpx;
		input{
			height: 70rpx;
		}
	}
</style>
